<template>
  <div>
    <!-- 定义路由占位符 -->
    <router-view></router-view>
    <!-- 雪花效果 -->
    <canvas id="Snow"></canvas>
  </div>
</template>

<script>
export default {
  name: 'MyApp',
  // created() {
  //   // 获取用户信息-执行函数(一个小问题:刷新之后代码会重新执行)
  //   this.$store.dispatch('getUserInfoActions')
  // }
  mounted() {
    ;(function () {
      const flakes = []
      const canvas = document.getElementById('Snow')
      const ctx = canvas.getContext('2d')
      const flakeCount = 50
      let mX = -100
      let mY = -100

      canvas.width = window.innerWidth
      canvas.height = window.innerHeight

      function snow() {
        ctx.clearRect(0, 0, canvas.width, canvas.height)

        for (let i = 0; i < flakeCount; i++) {
          const flake = flakes[i]
          const x = mX
          const y = mY
          const minDist = 150
          const x2 = flake.x
          const y2 = flake.y

          const dist = Math.sqrt((x2 - x) * (x2 - x) + (y2 - y) * (y2 - y))
          // const dx = x2 - x
          // const dy = y2 - y

          if (dist < minDist) {
            const force = minDist / (dist * dist)
            const xcomp = (x - x2) / dist
            const ycomp = (y - y2) / dist
            const deltaV = force / 2

            flake.velX -= deltaV * xcomp
            flake.velY -= deltaV * ycomp
          } else {
            flake.velX *= 0.98
            if (flake.velY <= flake.speed) {
              flake.velY = flake.speed
            }
            flake.velX += Math.cos((flake.step += 0.05)) * flake.stepSize
          }

          ctx.fillStyle = 'rgba(255,255,255,' + flake.opacity + ')'
          flake.y += flake.velY
          flake.x += flake.velX

          if (flake.y >= canvas.height || flake.y <= 0) {
            reset(flake)
          }

          if (flake.x >= canvas.width || flake.x <= 0) {
            reset(flake)
          }

          ctx.beginPath()
          ctx.arc(flake.x, flake.y, flake.size, 0, Math.PI * 2)
          ctx.fill()
        }
        requestAnimationFrame(snow)
      }

      function reset(flake) {
        flake.x = Math.floor(Math.random() * canvas.width)
        flake.y = 0
        flake.size = Math.random() * 3 + 2
        flake.speed = Math.random() * 1 + 0.5
        flake.velY = flake.speed
        flake.velX = 0
        flake.opacity = Math.random() * 0.5 + 0.3
      }

      function init() {
        for (let i = 0; i < flakeCount; i++) {
          const x = Math.floor(Math.random() * canvas.width)
          const y = Math.floor(Math.random() * canvas.height)
          const size = Math.random() * 3 + 2
          const speed = Math.random() * 1 + 0.5
          const opacity = Math.random() * 0.5 + 0.3

          flakes.push({
            speed: speed,
            velY: speed,
            velX: 0,
            x: x,
            y: y,
            size: size,
            stepSize: (Math.random() / 30) * 1,
            step: 0,
            angle: 180,
            opacity: opacity
          })
        }

        snow()
      }

      document.addEventListener('mousemove', function (e) {
        mX = e.clientX
        mY = e.clientY
      })
      window.addEventListener('resize', function () {
        canvas.width = window.innerWidth
        canvas.height = window.innerHeight
      })
      init()
    })()
  }
}
</script>

<style lang="less">
* {
  margin: 0;
  padding: 0;
  // 禁止复制页面元素
  // user-select: none;
  box-sizing: border-box;
}
.el-message-box__wrapper .winClass {
  width: 420px;
}
.el-message.windthClass {
  min-width: 200px;
}
#Snow {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99999;
  // background: rgba(125,137,95,0.1);
  pointer-events: none;
}
.el-card__body {
  padding: 0;
}
/* 设置滚动条的样式 */
::-webkit-scrollbar {
  width: 4px;
  height: 6px;
}

/* 边角 */
::-webkit-scrollbar-corner {
  display: block;
}
/* 轨道 */
::-webkit-scrollbar-thumb,
::-webkit-scrollbar-track{
  border-right-color: transparent;
  border-left-color: transparent;
  background-color: rgba(0,0,0,.1);
}
/* 小方块 */
::-webkit-scrollbar-thumb{
  border-radius: 8px;
  background-color: rgba(0,0,0,.2);
}
</style>

<!-- 退出登录,重新登录,只走相关的组件代码(异步dom切换,不会导致所有代码重新执行,APP.vue不走) -->
<!-- 效果不对:换个账号得重新请求用户数据 -->
<!-- 解决: -->
<!-- 1.可以在登录页面,登录成功后,再次发送请求去拿用户信息 -->
<!-- 2.全局前置路由守卫中,写(路由跳转的时候,判断+获取) -->
